<template>
    <div class="demo-main">
        <div class="demo-head"><i class="bk-icon icon-pc"></i>⾸⻚</div>
        <div class="search-main">
            <bk-input :clearable="true" v-model="desc" style="width:
                320px" placeholder="请输⼊搜索内容"
                @clear="clear"></bk-input>
            <bk-button :theme="'primary'" :title="'主要按钮'"
                @click="handleClick">搜索</bk-button>
        </div>
    </div>
</template>
<style lang="postcss" scoped>
    .demo-main {
        padding: 10px 35px;
    }
    .demo-head {
        margin: 15px 0 25px;
        font-size: 18px;
    }
    .demo-head i {
        font-size: 22px;
        margin-right: 10px;
        color: #3a84ff;
    }
    .search-main {
        margin: 20px 0;
        width: 100%;
        display: flex;
    }
</style>
<template>
    <div class="demo-main">
        <div class="demo-head"><i class="bk-icon icon-pc"></i>⾸⻚</div>
        <div class="search-main">
            <bk-input :clearable="true" v-model="desc" style="width:
                320px" placeholder="请输⼊搜索内容"
                @clear="clear"></bk-input>
            <bk-button :theme="'primary'" :title="'主要按钮'"
                @click="handleClick">搜索</bk-button>
        </div>
        <div class="list-main">
            <bk-dialog v-model="showDialog"
                theme="primary"
                :mask-close="false"
                :header-position="'left'"
                title="消息内容">
            <span>{{detail}}</span>
        </bk-dialog>
        <div class="list-head">
            <span><i class="bk-icon icon-dialogue"></i>消息列表</span>
            <bk-switcher v-model="tableShow" theme="primary"></bk-switcher>
        </div>
        <div class="list-context">
        <div v-if="tableShow">
            <bk-table
                ext-cls="table-list"
                :data="data"
                :size="'small'"
                :show-header="false">
            <bk-table-column label="内容" prop="content"></bk-table-column>
            <bk-table-column label="状态" prop="status"
                width="30">
 <template slot-scope="props">
    <div v-if="props.row.status ===
        'success'" style="color: green">
    <i class="bk-icon icon-check-circle-shape"></i>
    </div>
    <div v-else style="color:red;">
    <i class="bk-icon icon-close-circle-shape"></i>
    </div>
 </template>
    </bk-table-column>
    <bk-table-column label="详情" width="50">
<template slot-scope="props">
    <div v-if="props.row.status.length > 0"
        style="color: #2d8cf0">
    <i class="bk-icon icon-order"
        @click="showDetail(props.row)"></i>
    </div>
 </template>
    </bk-table-column>
    </bk-table>
    </div>
    <div class="total" v-else>
    <i class="bk-icon icon-dialogue"></i>
        Hello, 你有 {{data.length}} 条消息
    </div>
    </div>
    </div>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data () {
            return {
                data: [{
                    content: '1、你的"20181212112308"单据已通过',
                    date: '刚刚',
                    status: 'success'
                }, {
                    content: '2、你的"20181212112308"单据被驳回',
                    date: '11月11日',
                    status: 'error'
                }],
                tableShow: true,
                showDialog: false
            }
        },
        methods: {
            showDetail (row) {
                this.showDialog = true
                this.detail = row.content
            }
        }
    }
</script>
    <style lang="postcss" scoped>
        .list-main {
            margin-top: 30px;
            width: 100%;
            min-height: 100px;
            border: 1px solid #dcdee5;
            border-radius: 2px;
        }
        .list-main .icon-dialogue {
             margin-right: 10px;
            color: #3a84ff;
        }
        .list-head {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #f8fafd;
            padding-left: 30px;
            border-bottom: 1px solid #e9ebf0;
        }
        .list-head span {
            display: inline-block;
            width: 96%;
            height: 100%;
        }
        .list-context {
        padding: 5px 0px 10px;
        }
        .table-list {
            margin-left: 1px;
            border: none;
        }
        .total {
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: center;
        }
</style>
